<template>
  <el-dialog
    :close-on-click-modal="false"
    :model-value="api.editState.visible"
    :title="api.editState.title"
    destroy-on-close
    width="600"
    @close="api.onCloseEdit()"
  >
    <el-form

      ref="formRef"
      :model="api.editState.form"
      :rules="rules"
      class="company-edit"
      label-width="120px"
      status-icon
    >

      <el-form-item
        label="公司名称"
        prop="name"
      >
        <el-input
          v-model="api.editState.form.name"
          clearable
          placeholder="公司名称"
        />
      </el-form-item>

      <el-tabs
        v-model="settings.active"
        style="min-height: 300px"
        type="border-card"
      >
        <el-tab-pane label="公司信息" name="header">
          <el-form-item
            label="公司标题"
            prop="title"
          >
            <el-input
              v-model="settings.header.title"
              clearable
              placeholder="公司标题"
            />
          </el-form-item>
          <el-form-item
            label="logo"
            prop="title"
          >
            <el-upload
              :show-file-list="false"
              :on-success="(response)=>imageApi.onSuccess(response)"
              :http-request="(e)=>imageApi.onHttpRequest(e)"
            >
              <div class="d-flex avatar-uploader" style="">
                <img
                  v-if="imageApi.img.src"
                  :src="imageApi.img.src"
                  alt="logo"
                  class="avatar"
                  width="160"
                  height="160" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="小程序" name="applet">
          <el-form-item
            label="appid"
            prop="appid"
          >
            <el-input
              v-model="settings.applet.appid"
              clearable
              placeholder="小程序 appid"
            />
          </el-form-item>

          <el-form-item
            label="秘钥"
            prop="appid"
          >
            <el-input
              v-model="settings.applet.secret"
              clearable
              placeholder="小程序秘钥"
            />
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="公众号" name="general">
          <el-form-item
            label="appid"
            prop="generalAppid"
          >
            <el-input
              v-model="settings.general.appid"
              clearable
              placeholder="公众号 appid"
            />
          </el-form-item>
          <el-form-item
            label="秘钥"
            prop="generalSecret"
          >
            <el-input
              v-model="settings.general.secret"
              clearable
              placeholder="公众号秘钥"
            />
          </el-form-item>
          <el-form-item
            label="token"
            prop="generalCheckToken"
          >
            <el-input
              v-model="settings.general.token"
              clearable
              placeholder="公众号 认证的token"
            />
          </el-form-item>
          <el-form-item
            label="token秘钥"
            prop="generalCheckAesKey"
          >
            <el-input
              v-model="settings.general.aesKey"
              clearable
              placeholder="公众号 认证的token 秘钥"
            />
          </el-form-item>
        </el-tab-pane>

      </el-tabs>

      <el-form-item class="mb-0 mt-3" label-width="0">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="api.onCloseEdit()">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { CompanyApi } from "@/api/system/company/company.api";
import { FormRules } from "element-plus";
import { ImageApi } from "~/api/system/file/image.api";
import { Plus } from "@element-plus/icons-vue";

interface Props {
  api: CompanyApi;
}

const { api } = withDefaults(defineProps<Props>(), {});

const imageApi = new ImageApi();

let settings = reactive({
  active: "header",
  header: {
    title: "",
    logo: "",
  },
  applet: {
    appid: "",
    secret: "",
  },
  general: {
    appid: "",
    secret: "",
    token: "",
    aesKey: "",
  },
});

const formRef = ref();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
});

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.editState.form.settingList = [];
    api.editState.form.settingList.push({
      label: "公司信息",
      type: "HEADER",
      code: "header",
      children: [
        {
          type: "HEADER",
          label: "标题",
          value: settings.header.title,
          code: "title",
        },
        {
          type: "HEADER",
          label: "logo",
          value: imageApi.img.value,
          code: "logo",
        },
      ],
    });
    api.editState.form.settingList.push({
      label: "小程序配置",
      code: "applet",
      type: "APPLET",
      children: [
        {
          type: "APPLET",
          label: "小程序appid",
          value: settings.applet.appid,
          code: "appid",
        },
        {
          type: "APPLET",
          label: "小程序秘钥",
          value: settings.applet.secret,
          code: "secret",
        },
      ],
    });
    api.editState.form.settingList.push({
      label: "公众号配置",
      code: "general",
      type: "GENERAL",
      children: [
        {
          type: "GENERAL",
          label: "公众号appid",
          value: settings.general.appid,
          code: "appid",
        },
        {
          type: "GENERAL",
          label: "公众号秘钥",
          value: settings.general.secret,
          code: "secret",
        },
        {
          type: "GENERAL",
          label: "认证的token",
          value: settings.general.token,
          code: "token",
        },
        {
          type: "GENERAL",
          label: "认证的token秘钥",
          value: settings.general.aesKey,
          code: "aesKey",
        },
      ],
    });
    api.submit(api.editState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseEdit();
      }
    });
  }
}

watch(() => api.editState.form.id, value => {
  if (value) {
    imageApi.init();
    api.editState.form.settingList?.forEach(async item => {
      if (item.type == "HEADER") {
        if (item.code == "title") {
          settings.header.title = item.value as any;
        }
        if (item.code == "logo") {
          settings.header.logo = item.value as any;
          const src: any = await imageApi.getImg(item.value as any);
          imageApi.img.src = src;
          imageApi.img.value = item.value as any;
        }
      }
      if (item.type == "APPLET") {
        if (item.code == "appid") {
          settings.applet.appid = item.value as any;
        }
        if (item.code == "secret") {
          settings.applet.secret = item.value as any;
        }
      }
      if (item.type == "GENERAL") {
        if (item.code == "appid") {
          settings.general.appid = item.value as any;
        }
        if (item.code == "secret") {
          settings.general.secret = item.value as any;
        }
        if (item.code == "token") {
          settings.general.token = item.value as any;
        }
        if (item.code == "aesKey") {
          settings.general.aesKey = item.value as any;
        }
      }
    });
  } else {
    settings = reactive({
      active: "header",
      header: {
        title: "",
        logo: "",
      },
      applet: {
        appid: "",
        secret: "",
      },
      general: {
        appid: "",
        secret: "",
        token: "",
        aesKey: "",
      },
    });
  }
});
</script>

<style lang="scss" scoped>
.company-edit {
  :deep(.el-tabs__content) {
    padding-left: 0;
  }

  :deep(.el-upload) {
    width: 100% !important;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 162px;
    height: 162px;
    text-align: center;
  }

  .avatar-uploader {
    border-width: 1px;
    border-style: dashed;
    border-radius: 4px;
    border-color: var(--el-border-color);

    &:hover {
      border-color: var(--el-border-color-hover);
    }
  }
}

</style>
